<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>花间村 - 会员中心 - 订单</title>
    <link rel="stylesheet" href="{{ asset('css/wechat_service_account.css') }}">
    <style>
        .btn-danger {
            --bs-btn-color: #fff;
            --bs-btn-bg: #dc3545;
            --bs-btn-border-color: #dc3545;
            --bs-btn-hover-color: #fff;
            --bs-btn-hover-bg: #bb2d3b;
            --bs-btn-hover-border-color: #b02a37;
            --bs-btn-focus-shadow-rgb: 225, 83, 97;
            --bs-btn-active-color: #fff;
            --bs-btn-active-bg: #b02a37;
            --bs-btn-active-border-color: #a52834;
            --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
            --bs-btn-disabled-color: #fff;
            --bs-btn-disabled-bg: #dc3545;
            --bs-btn-disabled-border-color: #dc3545;
        }
        
        /* 分页样式 */
        .pagination {
            margin: 20px 0;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .page-item {
            margin: 0 2px;
        }
        
        .page-link {
            display: block;
            padding: 8px 12px;
            background-color: #fff;
            border: 1px solid #dee2e6;
            color: #07C160;
            text-decoration: none;
            border-radius: 4px;
            transition: all 0.2s;
        }
        
        .page-link:hover {
            background-color: #e9ecef;
            border-color: #adb5bd;
        }
        
        .page-item.active .page-link {
            background-color: #07C160;
            border-color: #07C160;
            color: #fff;
        }
        
        .page-item.disabled .page-link {
            background-color: #f8f9fa;
            border-color: #dee2e6;
            color: #6c757d;
        }
    </style>

</head>

<body>
    <div class="container">
        <!-- 载入用户信息卡 -->
        @include('wechat.service_account.components.user_card')
        <h2 class="page-title">我的订单</h2>
        @if($orders->isEmpty())
        <div class="alert alert-info text-center">暂无订单</div>
        @else
        <div class="order-list">
            @foreach($orders as $order)
            <div class="order-card" style="background:#fff;border-radius:10px;padding:20px;margin-bottom:20px;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
                <div><strong>订单编号：</strong>{{ $order->order_number }}</div>
                <div><strong>收货人：</strong>{{ $order->receiver_name }}</div>
                <div><strong>联系电话：</strong>{{ $order->receiver_phone }}</div>
                <div><strong>收货地址：</strong>{{ $order->shipping_address }}</div>
                <div><strong>总价：</strong>¥{{ number_format($order->total_price, 2) }}</div>
                <div><strong>状态：</strong>{{ $order->status_name ?? $order->status }}</div>
                <div><strong>下单时间：</strong>{{ $order->created_at }}</div>

                {{-- 当订单状态为已发货或已签收时，显示物流信息 --}}
                @if(in_array($order->status, ['已发货', '已签收']))
                <div><strong>物流公司：</strong>{{ $order->logistics_company }}</div>
                <div><strong>物流单号：</strong>{{ $order->tracking_number }}</div>
                <div><strong>发货时间：</strong>{{ $order->shipped_at }}</div>
                @endif

                @if($order->status === '未支付')
                <div style="margin-top:10px; text-align: right;">
                    <form action="{{ route('wechat.service.account.orders.cancel', $order->id) }}" method="POST" style="display: inline;">
                        @csrf
                        <button type="submit" class="btn btn-danger">取消订单</button>
                    </form>
                </div>
                @endif

                @if($order->items && count($order->items))
                <div style="margin-top:10px;"><strong>商品列表：</strong></div>
                <ul style="padding-left:20px;">
                    @foreach($order->items as $item)
                    <li>
                        {{ $item->product_name }} × {{ $item->quantity }}
                        <span style="color:#07C160;">¥{{ number_format($item->price, 2) }}</span>
                    </li>
                    @endforeach
                </ul>
                @endif
            </div>
            @endforeach
        </div>
        <div class="d-flex justify-content-center">
            @if ($orders->hasPages())
                <nav aria-label="Page navigation example">
                    <ul class="pagination">
                        {{-- Previous Page Link --}}
                        @if ($orders->onFirstPage())
                            <li class="page-item disabled">
                                <span class="page-link">上一页</span>
                            </li>
                        @else
                            <li class="page-item">
                                <a class="page-link" href="{{ $orders->previousPageUrl() }}" rel="prev">上一页</a>
                            </li>
                        @endif

                        {{-- Pagination Elements --}}
                        @foreach ($orders->getUrlRange(1, $orders->lastPage()) as $page => $url)
                            @if ($page == $orders->currentPage())
                                <li class="page-item active">
                                    <span class="page-link">{{ $page }}</span>
                                </li>
                            @else
                                <li class="page-item">
                                    <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                                </li>
                            @endif
                        @endforeach

                        {{-- Next Page Link --}}
                        @if ($orders->hasMorePages())
                            <li class="page-item">
                                <a class="page-link" href="{{ $orders->nextPageUrl() }}" rel="next">下一页</a>
                            </li>
                        @else
                            <li class="page-item disabled">
                                <span class="page-link">下一页</span>
                            </li>
                        @endif
                    </ul>
                </nav>
            @endif
        </div>
        @endif
        <!-- 载入底部导航栏 -->
        @include('wechat.service_account.components.bottom_nav')
</body>

</html>